import React, { useEffect, useState } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
import context from './context'

export default function App() {
  // 定义todos状态
  const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('TODOS_KEY')) || [])

  // todos数据进行持久化(保存到local中)
  useEffect(() => {
    localStorage.setItem('TODOS_KEY', JSON.stringify(todos))
  }, [todos])


  // 添加todo
  const addTodo = (title) => {
    // 创建todo
    const todo = {
      id: Date.now(), // 保存id不重复
      title,
      complete: false, // 未完成的
    }
    // 产生一个新的todos
    const newTodos = [todo, ...todos]
    // 更新todos
    setTodos(newTodos)
  }

  // 删除todo
  const deleteTodo = (id) => {
    // 生成一个过滤了id对应todo的新的todos
    const newTodos = todos.filter(todo => todo.id!=id)
    // 更新todos
    setTodos(newTodos)
  }

  // 切换todo的complete
  const toggleTodo = (id) => {
    // 生成一个改id对应的todo的complete进行切换后的新的todos
    const newTodos = todos.map(todo => {
      if (todo.id===id) {
        // return {id: todo.id, title: todo.title, complete: !todo.complete}
        return {...todo, complete: !todo.complete}
      }
      return todo
    })
    // 更新todos
    setTodos(newTodos)
  }

  // 清除所有已完成的todo
  const clearCompleteTodos = () => {
    const newTodos = todos.filter(todo => !todo.complete)
    setTodos(newTodos)
  }
  // 全选或全不选
  const selectAllTodos = (isCheck) => {
    const newTodos = todos.map(todo => ({
      ...todo,
      complete: isCheck
    }))
    setTodos(newTodos)
  }

  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header addTodo={addTodo}/>
      <context.Provider value={{msg: 'abc', deleteTodo, toggleTodo}}>
        <List todos={todos}/>
      </context.Provider>
      <Footer todos={todos} clearCompleteTodos={clearCompleteTodos} selectAllTodos={selectAllTodos}/>
    </div>
  </div>
  )
}
